<template>
  <div class="student-profile">
    <h1 class="text-3xl font-bold text-gray-800 mb-6">个人资料</h1>
    
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
      <!-- 个人信息卡片 -->
      <div class="lg:col-span-1">
        <div class="bg-white p-6 rounded-lg shadow-md">
          <div class="text-center mb-6">
            <div class="w-32 h-32 mx-auto bg-gray-200 rounded-full flex items-center justify-center mb-4">
              <span class="text-4xl text-gray-500">👤</span>
            </div>
            <h2 class="text-xl font-semibold text-gray-700">张三</h2>
            <p class="text-gray-500">计算机科学与技术专业</p>
          </div>
          
          <div class="space-y-4">
            <div class="flex justify-between items-center">
              <span class="text-gray-600">学号</span>
              <span class="font-medium">2021001001</span>
            </div>
            <div class="flex justify-between items-center">
              <span class="text-gray-600">班级</span>
              <span class="font-medium">计算机2101班</span>
            </div>
            <div class="flex justify-between items-center">
              <span class="text-gray-600">年级</span>
              <span class="font-medium">2021级</span>
            </div>
            <div class="flex justify-between items-center">
              <span class="text-gray-600">入学年份</span>
              <span class="font-medium">2021年</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 详细信息 -->
      <div class="lg:col-span-2 space-y-6">
        <!-- 基本信息 -->
        <div class="bg-white p-6 rounded-lg shadow-md">
          <h3 class="text-lg font-semibold text-gray-700 mb-4">基本信息</h3>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">姓名</label>
              <input type="text" value="张三" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" readonly>
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">性别</label>
              <input type="text" value="男" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" readonly>
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">出生日期</label>
              <input type="text" value="2003-05-15" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" readonly>
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">身份证号</label>
              <input type="text" value="110101200305150001" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" readonly>
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">民族</label>
              <input type="text" value="汉族" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" readonly>
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">政治面貌</label>
              <input type="text" value="共青团员" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" readonly>
            </div>
          </div>
        </div>

        <!-- 联系方式 -->
        <div class="bg-white p-6 rounded-lg shadow-md">
          <h3 class="text-lg font-semibold text-gray-700 mb-4">联系方式</h3>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">手机号码</label>
              <input type="tel" value="13800138000" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">邮箱地址</label>
              <input type="email" value="zhangsan@example.com" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>
            <div class="md:col-span-2">
              <label class="block text-sm font-medium text-gray-700 mb-1">家庭住址</label>
              <input type="text" value="北京市朝阳区某某街道某某小区" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>
          </div>
        </div>

        <!-- 紧急联系人 -->
        <div class="bg-white p-6 rounded-lg shadow-md">
          <h3 class="text-lg font-semibold text-gray-700 mb-4">紧急联系人</h3>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">联系人姓名</label>
              <input type="text" value="张父" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">关系</label>
              <input type="text" value="父亲" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">联系电话</label>
              <input type="tel" value="13900139000" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">工作单位</label>
              <input type="text" value="某某公司" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>
          </div>
        </div>

        <!-- 保存按钮 -->
        <div class="flex justify-end">
          <button class="bg-blue-500 text-white px-6 py-2 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500">
            保存修改
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
// 学生个人资料页面逻辑
</script>

<style scoped>
.student-profile {
  padding: 2rem;
  background-color: #f8fafc;
  min-height: 100vh;
}
</style> 